<template>
  <view class="flex flex-col items-center justify-center">
    <z-paging
      ref="paging" v-model="dataList" :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="false" @refresher-status-change="refresherStatusChange" @query="queryList"
    >
      <view class="banner-view">
        <u-swiper
          class="w-full" height="400rpx" bg-color="#fff" :list="list3"
          previous-margin="30"
          next-margin="30"
          circular
          :autoplay="false"
          radius="5"
        />
        <up-image
          class="mb-50rpx h-100rpx w-100rpx -mt-50rpx" shape="circle"
          src="/static/images/logo.png"
          width="100rpx"
          height="100rpx"
        />
        <view class="flex justify-center">
          <text class="font-size-36rpx color-gray-700">
            {{ title }}
          </text>
        </view>
        <view class="my-2 flex justify-center gap-2">
          <u-tag text="标签标签" plain shape="circle" /><u-tag text="标签标签标签标签" plain shape="circle" />
        </view>
        <view class="mt-20rpx w-full">
          <u-grid
            :border="false"
            col="5"
          >
            <u-grid-item v-for="(listItem, listIndex) in menu" :key="listIndex">
              <u-icon
                :custom-style="{ paddingTop: `${25}rpx` }"
                :name="listItem.name"
                :size="25"
              />
              <text class="grid-text">
                {{ listItem.title }}
              </text>
            </u-grid-item>
          </u-grid>
        </view>

        <view class="w-full">
          <u-swiper
            class="p-2"
            height="200rpx"
            :list="list3"
            circular
            :autoplay="false"
            radius="5"
            bg-color="#fff"
          />
        </view>
        <view class="w-full">
          <u-swiper
            class="p-2"
            height="200rpx"
            :list="list3"
            circular
            :autoplay="false"
            radius="5"
            bg-color="#fff"
          />
        </view>
      </view>
      <!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
      <view style="z-index: 100;">
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <z-tabs :list="tabList" @change="tabsChange" />
      </view>
      <!-- 自定义下拉刷新view -->
      <!--          <template #refresher>
            <custom-refresher :status="refresherStatus" />
          </template> -->
      <view v-for="(item, index) in dataList" :key="index" class="item">
        <view class="item-title">
          {{ item.title }}
        </view>
        <view class="item-detail">
          {{ item.detail }}
        </view>
        <view class="item-line" />
      </view>
    </z-paging>

    <!--  <view class="w-full">
    <article-list></article-list>
  </view> -->
    <!-- <view class="">
      <navigator url="/pages/tab/list/list">list</navigator>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store';

const paging = ref(null);

const tabIndex = ref(0);
const tabList = ref(['测试1', '测试2', '测试3', '测试4']);
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
const dataList = ref([]);
const refresherStatus = ref(0);
const firstLoaded = ref(false);

function tabsChange(index: any) {
  tabIndex.value = index;
  // 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
  paging.value.reload();
}

function refresherStatusChange(status: any) {
  refresherStatus.value = status;
}
// uni.$u.toast('对方的哈佛的好')
const title = ref<string>();
title.value = import.meta.env.VITE_APP_TITLE;
const list3 = [
  'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
];

const menu = [{
  name: 'photo',
  title: '图片',
}, {
  name: 'lock',
  title: '锁头',
}, {
  name: 'star',
  title: '星星',
}, {
  name: 'hourglass',
  title: '沙漏',
}, {
  name: 'home',
  title: '首页',
}, {
  name: 'star',
  title: '音量',
}];

//     const click = (name) => {
//     //this.$refs.uToast.success(`点击了第${name}个`)
// }

// const urls = [
//   'https://cdn.uviewui.com/uview/album/1.jpg',
//   'https://cdn.uviewui.com/uview/album/2.jpg',
//   'https://cdn.uviewui.com/uview/album/3.jpg',
//   'https://cdn.uviewui.com/uview/album/4.jpg',
//   'https://cdn.uviewui.com/uview/album/5.jpg',
//   'https://cdn.uviewui.com/uview/album/6.jpg',
//   'https://cdn.uviewui.com/uview/album/7.jpg',
//   'https://cdn.uviewui.com/uview/album/8.jpg',
//   'https://cdn.uviewui.com/uview/album/9.jpg',
//   'https://cdn.uviewui.com/uview/album/10.jpg',
// ];

function queryList(pageNo, pageSize) {
  console.log('[ pageNo ] >', pageNo);
  console.log('[ pageSize ] >', pageSize);
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过pagingRef.value.complete(请求回来的数组)将请求结果传给z-paging
  setTimeout(() => {
    // 1秒之后停止刷新动画
    const list = [];
    for (let i = 0; i < 30; i++) {
      // list.push(urls[uni.$u.random(0, urls.length - 1)]);
      list.push({
        title: (i + 1).toString(),
        detail: `测试信息${tabIndex.value + 1}`,
      });
    }

    paging.value?.complete(list);
    firstLoaded.value = true;
  }, 1000);
  // this.$request
  //   .queryList({ pageNo, pageSize })
  //   .then(res => {
  //     // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
  //     pagingRef.value.complete(res.data.list);
  //   })
  //   .catch(res => {
  //     // 如果请求失败写pagingRef.value.complete(false)，会自动展示错误页面
  //     // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
  //     // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
  //     pagingRef.value.complete(false);
  //   });
}
const store = useUserStore();
console.log('store.user_name', store.user_name);
</script>

<style lang="scss">
   .grid-text {
          padding: 10rpx 0 20rpx 0rpx;
          font-size: 14px;
          color: #909399;

          /* #ifndef APP-PLUS */
          box-sizing: border-box;

          /* #endif */
      }

      .banner-view {
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          flex-direction: column;
        }

        .item {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0rpx 30rpx;
          height: 150rpx;
        }

        .item-detail {
          padding: 5rpx 15rpx;
          font-size: 28rpx;
          color: white;
          background-color: #007AFF;
          border-radius: 10rpx;
        }

        .item-line {
          position: absolute;
          bottom: 0rpx;
          left: 0rpx;
          width: 100%;
          height: 1px;
          background-color: #eee;
        }
</style>
